/**
 *  学习目标：Todos 案例
 *  需求1：✅组件拆分
 *  需求2：✅声明数据、渲染任务列表
 *  需求3：✅根据id，更新任务的状态
 *  需求4：✅根据id，删除一条任务
 *  需求5：✅新增一条数据
 *  需求6：✅数据缓存
 *  需求7：✅小选影响全选
 *  需求8：✅全选影响小选
 *  需求9：✅数据切换-点谁谁有边框
 *  需求10：✅数据切换
 */
/* 
需求1：✅组件拆分
1. 选中代码，右键 - 重构 - 提取到 modules 中的 function
2. 把 function 改成 函数组件写法 {Header()} ---> <Header />
3. 选中代码，右键- 重构 - move to a new file，再把文件拖到 components 文件夹
4. 打开 Footer.js ,右键 - 重构 - 默认导出
*/
/* 
需求2：✅声明数据、渲染任务列表
0. 把 App 从 类 改成函数组件
1. App组件中声明list ,需要状态提升，兄弟组件通信
2. 父传子给Main传来list
3. Main组件中通过props接收list
4. 列表渲染
5. 处理className和checked属性
*/
/* 
需求3：✅根据id，更新任务的状态
1. App中定义更新状态的函数
2. 父传子回调函数
3. 子组件Main中调用函数，传参id
4. 完成更新的逻辑 - 新值覆盖旧值
*/
/* 
需求4：✅根据id，删除一条任务
1. App中定义删除的函数
2. 父传子回调函数
3. 子组件Main中调用函数，传参id
4. 完成更新的逻辑 - 新值覆盖旧值
*/
/* 
需求5：✅新增一条数据
1. Header组件改造为受控组件
2. 监听回车事件
3. 在App组件中定义新增的函数，传递给子组件
4. 子传父：回调函数
5. 在Header组件的回车事件中，触发调函数
6. 完成新增的计算
7. 优化： 非空判断 和 清空输入框的值
*/
/* 
需求6：✅数据缓存
1. 使用useEffect监听list的变化
2. 更新后的值，存缓存
3. 从缓存中取出初始值
*/
/* 
需求7：✅小选影响全选
原理：💥 模拟计算属性原理：setState会导致组件重新渲染，声明的变量会被重新计算
1. Main组件中，在return之前，声明计算属性isAll
2. 通过isAll控制checked属性
*/
/* 
需求8：✅全选影响小选
1. App中定义全选的函数
2. 父传子回调函数
3. 子组件Main中调用函数，默认会传事件对象e，那么 e.target.value 就是改变后的状态
4. 完成更新的逻辑 - 新值覆盖旧值
*/
/* 
需求9：✅数据切换-点谁谁有边框
1. 父传子 type - 当前状态，setType - 修改状态方法， filterArr - 需要渲染的数组
2. 子组件通过 filterArr 渲染按钮，绑定类名, className={type === item ? 'selected' : ''}
3. 添加点击事件，调用 setType(item)
*/
/* 
需求10：✅数据切换
1. 定义计算属性 showList ,根据 type 计算好 showList
2. 传递 showList 到 Main，做列表渲染
*/
/* 
需求11：✅未完成统计 和 清理已完成
1. 未完成统计 在 Footer 组件接收 list，计算得到 
    leftCount = list.filter((item) => !item.done).length;
2. 清理已完成
    在父组件定义 清理函数，传递到 Footer
    子组件点击时候调用 
    父组件完成清理功能
    const handleClearDone = () => { setList(list.filter((item) => !item.done)) };
*/

import ReactDOM from 'react-dom';
import App from './App';

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'));
